<template>
  <div>
    <div v-if="!isUploadQualification" class="info-container">
      <div class="info-content">
        <h1 class="info-h1">欢迎加入仪会通！</h1>
        <h6 class="info-h6">如需帮助请拨打157-1885-0776或线上客服</h6>
        <!-- <img class="info-left-img" src="https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/zc_top.png" alt=""> -->
        <img
          class="info-top-img"
          src="https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/zc_top.png"
          alt=""
        />
        <div class="info-form">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="110px"
            class="info-ruleForm"
          >
            <el-form-item label="如何称呼您" prop="nickname">
              <el-input
                placeholder="请输入您的姓名"
                class="w660"
                v-model.trim="ruleForm.nickname"
              />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
              <el-input
                v-model.trim="ruleForm.password"
                type="password"
                class="w660"
                placeholder="请设置8-16个字母与数字组合的密码"
              />
            </el-form-item>
            <el-form-item label="邮    箱" prop="email">
              <el-input
                v-model.trim="ruleForm.email"
                class="w660"
                placeholder="用于联系您"
              />
            </el-form-item>
            <el-form-item label="贵单位是" prop="companyType">
              <ul class="radio-ul">
                <el-radio-group v-model="ruleForm.companyType" size="small">
                  <el-radio
                    v-for="(item, index) in companyPropertie"
                    :key="index"
                    class="check-item"
                    border
                    :label="item.id"
                  >
                    {{ item.name }}
                    <svg-icon class="item-svg2" icon-class="selected" />
                  </el-radio>
                </el-radio-group>
              </ul>
            </el-form-item>
            <div v-show="ruleForm.companyType == '1'">
              <div class="form-title">
                <h1>完善单位信息</h1>
                <span>请按真实情况填写，否则无法正常开通服务</span>
              </div>
              <el-form-item label="单位名称" prop="companyName">
                <el-input
                  v-model.trim="ruleForm.companyName"
                  class="w660"
                  placeholder="最多30个汉字，支持英文及符号"
                  maxlength="30"
                  show-word-limit
                />
                <!-- <el-tooltip class="tooltip-text" effect="dark" content="防止厂商不清楚何为展位，故需要增加一段介绍文案，可能涉及图片，建议为弹窗，具体文案及图片需提供" placement="top-start">
                  <i class="el-icon-question" />
                </el-tooltip> -->
              </el-form-item>
              <el-form-item label="单位简称" prop="brandBrief">
                <el-input
                  v-model.trim="ruleForm.brandBrief"
                  class="w660"
                  placeholder="最多8个汉字，支持英文和符号"
                  maxlength="8"
                  show-word-limit
                />
              </el-form-item>
              <el-form-item label="主攻行业" prop="industryVOS">
                <p class="checkbox-tip">最多选三项</p>
                <ul class="checkbox-ul">
                  <el-checkbox-group
                    v-model="ruleForm.industryVOS"
                    size="small"
                    :max="3"
                  >
                    <el-checkbox
                      v-for="(item, index) in imIndustryData"
                      :key="index"
                      class="check-item"
                      border
                      :label="item"
                    >
                      {{ item.iminame }}
                      <svg-icon class="item-svg" icon-class="selected" />
                    </el-checkbox>
                  </el-checkbox-group>
                </ul>
              </el-form-item>
              <el-form-item label="主营产品" prop="imMainproductsVOS">
                <ul class="checkbox-ul">
                  <li
                    v-for="(item, index) in ruleForm.imMainproductsVOS"
                    :key="index"
                    class="check-item-products"
                  >
                    <span>{{ item.threesortname }}</span>
                    <i class="el-icon-error" @click="delectProduct(index)" />
                  </li>
                  <li class="check-item-add" @click="isProductDialog = true">
                    +新增主营商品
                  </li>
                </ul>
              </el-form-item>
              <el-form-item label="您需要">
              <ul class="radio-ul">
                <el-radio-group v-model="ruleForm.companyRequire" size="small">
                  <el-radio
                    v-for="(item, index) in vipData"
                    :key="index"
                    class="check-item"
                    border
                    :label="item"
                  >
                    {{ item }}
                    <svg-icon class="item-svg2" icon-class="selected" />
                  </el-radio>
                </el-radio-group>
              </ul>
            </el-form-item>
            </div>
            <div v-show="ruleForm.companyType == '2'">
              <el-form-item label="单位性质" prop="companyPropertiesId">
                <el-select
                  v-model="ruleForm.companyPropertiesId"
                  placeholder="请选择单位性质"
                  class="w660"
                >
                  <el-option
                    v-for="item in selectUnitTypeData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单位名称" prop="companyName">
                <el-input
                  v-model.trim="ruleForm.companyName"
                  class="w660"
                  placeholder="最多8个汉字，支持英文和符号"
                  maxlength="8"
                  show-word-limit
                />
              </el-form-item>
            </div>
          </el-form>
          <el-button
            class="info-btn"
            :loading="isSubmit"
            @click="onWorkbenchSubmit('ruleForm')"
            >进入工作台</el-button
          >
          <!-- <el-link class="info-link" type="primary" :underline="false" @click="isAntiBinding = true">公司已有展位，点击进行绑定</el-link> -->
        </div>
      </div>
      <!-- 新增主营产品 -->
      <el-dialog
        title="新增主营产品"
        :visible.sync="isProductDialog"
        width="650px"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane label="仪器" name="first">
            <addMainproducts
              :data-list="ruleForm.imMainproductsVOS"
              :sort-type="0"
              @confirmProductsList="getConfirmProductsList"
            />
          </el-tab-pane>
          <el-tab-pane label="耗材" name="second">
            <addMainproducts
              :data-list="ruleForm.imMainproductsVOS"
              :sort-type="3"
              @confirmProductsList="getConfirmProductsList"
            />
          </el-tab-pane>
          <el-tab-pane label="试剂" name="third">
            <addMainproducts
              :data-list="ruleForm.imMainproductsVOS"
              :sort-type="2"
              @confirmProductsList="getConfirmProductsList"
            />
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
    <div v-if="isUploadQualification">
      <uploadQualification />
    </div>
    <el-dialog
  title="提示"
  :visible.sync="diaTs"
  width="30%">
  <div style="text-align: center;">您还不是仪会通会员，请填写信息进行注册！</div>
</el-dialog>
  </div>
</template>
<script>
import api from "@/api";
import Cookies from "js-cookie";
import addMainproducts from "./addMainproducts.vue";
import uploadQualification from "./uploadQualification.vue";
import {
  validatePass,
  validateEmail,
  validateBoothNo,
  checkBoothName,
} from "@/utils/validate";
export default {
  name: "Information",
  components: { addMainproducts, uploadQualification },
  data() {
    return {
      isUploadQualification: false,
      isSubmit: false,
      isProductDialog: false,
      activeName: "first",
      mptype: 4, // 1:仪器 2:老耗材配件 3:试剂标物 4:新耗材配件
      ruleForm: {
        nickname: "", //人名
        password: "", //密码
        email: "", //邮箱
        companyType: "1", //公司类型
        companyName: "", //公司名称
        brandBrief: "", //公司简称
        industryVOS: [], //主攻行业
        imMainproductsVOS: [], //主营产品
        companyPropertiesId: "", //单位性质
        companyPropertiesName: "", //单位性质
        companyRequire:'',//需求内容
      },
      selectUnitTypeData: [], //性质列表
      rules: {
        nickname: [{ required: true, message: "请填写称呼", trigger: "blur" }],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        email: [{ required: true, validator: validateEmail, trigger: "blur" }],
        companyName: [
          {
            required: true,
            message: "请填写公司名称,最多30个汉字,支持英文及符号",
            trigger: "blur",
          },
        ],
        brandBrief: [
          {
            required: true,
            message: "请填写单位简称,最多8个汉字,支持英文和符号",
            trigger: "blur",
          },
        ],
        industryVOS: [
          {
            type: "array",
            required: true,
            message: "请选择主攻行业",
            trigger: "change",
          },
        ],
        imMainproductsVOS: [
          {
            type: "array",
            required: true,
            message: "请选择主营产品",
            trigger: "change",
          },
        ],
        companyPropertiesId: [
          { required: true, message: "请选择单位性质", trigger: "change" },
        ],
      },
      imIndustryData: [],
      ruleBindForm: {
        username: "", // 展位号或厂商编号
        password: "", // 密码
        email: "", // 邮箱
      },
      rulesBind: {
        username: [
          { required: true, validator: validateBoothNo, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入展位密码", trigger: "blur" },
        ],
        email: [{ required: true, validator: validateEmail, trigger: "blur" }],
      },
      vipData:['了解付费版本','申请免费试用','付费开通服务'],
      companyPropertie: [
        { name: "仪器厂商", id: "1" },
        { name: "学会/协会/大专院校/科研单位/生产企业", id: "2" },
      ],
      isJurisdiction: false,
      isBindLoading: false,
      diaTs:false
    };
  },
  created() {
    //this.getMainproductsData()
    this.getImIndustry();
    this.selectUnitType();
  },
  mounted(){
   if (this.$route.query.new==1) {
    this.diaTs=true
    setTimeout(() => {
      this.diaTs=false
    }, 3000);
   }
  },
  methods: {
    async selectUnitType() {
      let form = {
        typename: "DWLX",
        parentid: 0,
      };
      const { data } = await api.login.selectUnitType(form);
      this.selectUnitTypeData = data;
    },
    handleClose() {
      this.ruleBindForm = this.$options.data().ruleBindForm;
      this.$refs.ruleBindForm.resetFields();
      this.isJurisdiction = false;
    },
    // 进入工作台
    onWorkbenchSubmit(formName) {
      // this.isUploadQualification = true
      //判断性质
      
      if (this.ruleForm.companyType == "1") {
        delete this.rules.companyPropertiesId;
      } else {
        this.selectUnitTypeData.forEach(item => {
                if(item.id==this.ruleForm.companyPropertiesId){
                  this.ruleForm.companyPropertiesName=item.name
                }
            });

        delete this.rules.brandBrief;
        delete this.rules.industryVOS;
        delete this.rules.imMainproductsVOS;
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.isSubmit = true;
          try {
            await api.login.addBaseInfo(this.ruleForm);
            if (this.ruleForm.companyType == "1") {
              this.isUploadQualification = true;
            } else {
              this.$router.push("/surey");
            }
            localStorage.removeItem("RMobile");
          } catch (error) {
            this.isSubmit = false;
          }
        } else {
          return false;
        }
      });
    },
    async getImIndustry() {
      const _this = this;
      const { data } = await api.common.getImIndustry();
      _this.imIndustryData = data;
    },
    async getMainproductsData() {
      const _this = this;
      const params = {
        mptype: _this.mptype,
      };
      await api.login.getMainproductsList(params);
    },
    getConfirmProductsList(data) {
      this.ruleForm.imMainproductsVOS.push(...data);
      this.isProductDialog = false;
    },
    delectProduct(i) {
      this.ruleForm.imMainproductsVOS.splice(i, 1);
    },
    async getServiceSurplus() {
      if (
        this.ruleBindForm.username &&
        checkBoothName(this.ruleBindForm.username)
      ) {
        const { data } = await api.servicePermApi.surplusPermissionByAccount(
          this.ruleBindForm.username,
          "ACCOUNT_LIMIT"
        );
        this.isJurisdiction = data === 0;
      } else {
        this.isJurisdiction = false;
      }
    },
    submitBinding(formName) {
      const _this = this;
      _this.$refs[formName].validate(async (valid) => {
        if (valid) {
          _this.isBindLoading = true;
          try {
            await api.boss.userBindCompany(_this.ruleBindForm);
            _this.$router.push({ path: "/dashboard" });
          } catch (error) {
            _this.isBindLoading = false;
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .radio-ul .el-radio__input {
  display: none;
}
::v-deep .radio-ul .el-radio__label {
  padding-left: 0px;
}
::v-deep .radio-ul .el-radio--small.is-bordered {
  padding: 8px 15px 0 15px;
}
::v-deep .radio-ul .is-checked .item-svg2 {
  color: #0c7ff2;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 18px;
  z-index: 999;
}
::v-deep .radio-ul .item-svg2 {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0;
}
.info-container {
  width: 100%;
  min-height: 100%;
  background: url("https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/zc_bg.png")
    no-repeat;
  background-size: 100%;
  padding: 0 0 170px;
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  .info-content {
    width: 914px;
    margin: 0 auto;
    overflow: hidden;

    .info-h1 {
      font-size: 40px;
      font-weight: 600;
      color: #202933;
      line-height: 1;
      margin: 35px 0 10px;
    }
    .info-h6 {
      color: #7e8790;
      font-size: 16px;
      line-height: 1;
      margin: 20px 0 20px;
    }
    .info-left-img {
      width: 200px;
      position: absolute;
      top: 218px;
      left: 17%;
      z-index: 1;
    }
    .info-top-img {
      width: 378px;
      position: absolute;
      top: 0px;
      right: 28%;
      z-index: 1;
    }
    .info-form {
      width: 100%;
      min-height: 675px;
      padding: 50px 75px 35px 65px;
      box-sizing: border-box;
      background: #fff;
      position: relative;
      z-index: 9;
      .info-ruleForm {
        .form-title {
          width: 100%;
          margin: 25px auto 30px;

          h1 {
            font-size: 24px;
            color: #4f5862;
            display: inline-block;
            vertical-align: middle;
            margin-right: 25px;
          }
          span {
            font-size: 12px;
            color: #7e8790;
            display: inline-block;
            vertical-align: middle;
          }
        }

        .checkbox-ul {
          // width: 480px;
          white-space: pre-wrap;

          ::v-deep .el-checkbox.is-bordered.is-checked {
            border-color: #0c7ff2;
            position: relative;

            .el-checkbox__label {
              color: #0c7ff2;
              font-weight: 400;
            }
            .item-svg {
              color: #0c7ff2;
              position: absolute;
              right: 0;
              bottom: 0;
              font-size: 18px;
              z-index: 999;
            }
          }

          .check-item {
            width: 140px;
            height: 32px;
            padding: 0 10px;
            box-sizing: border-box;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            line-height: 30px;
            margin-right: 16px;
            margin-bottom: 16px;
            position: relative;
            cursor: pointer;
            margin-left: 0;

            ::v-deep .el-checkbox__input {
              display: none;
            }
            ::v-deep .el-checkbox__label {
              padding: 0;
              color: #4f5862;
              font-size: 14px;
              font-weight: 400;
              overflow: hidden;
              width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              line-height: 30px;
              .item-svg {
                position: absolute;
                right: 0;
                bottom: 0;
                font-size: 0;
              }
            }
          }
          .check-item-add {
            width: 140px;
            height: 32px;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            border: 1px solid #0c7ff2;
            font-size: 14px;
            color: #0c7ff2;
            text-align: center;
            line-height: 30px;
            margin-right: 16px;
            margin-bottom: 16px;
            position: relative;
            cursor: pointer;

            &:hover {
              opacity: 0.8;
            }
          }
          .check-item-products {
            width: 140px;
            height: 32px;
            padding: 0 3px;
            box-sizing: border-box;
            border: 1px solid #e5eaf0;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            line-height: 30px;
            margin-right: 16px;
            margin-bottom: 16px;
            position: relative;
            margin-left: 0;

            span {
              display: inline-block;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            i {
              font-size: 16px;
              color: #c4c4c4;
              position: absolute;
              top: -8px;
              right: -8px;
              z-index: 9;
              cursor: pointer;
            }
          }
        }
        .checkbox-tip {
          font-size: 12px;
          line-height: 36px;
          color: #0c7ff2;
        }
      }

      ::v-deep .el-form-item__content {
        position: relative;

        .tooltip-text {
          font-size: 14px;
          color: #b9c0c7;
          position: absolute;
          top: 50%;
          right: -15px;
          z-index: 9;
          transform: translateY(-50%);
        }
      }

      .info-btn {
        display: block;
        padding: 14px 40px !important;
        font-size: 18px;
        color: #fff;
        border-radius: 4px;
        margin: 20px 109px 0;
        border: none;
        list-style: none;
        outline: none;
        background: #0c7ff2;
        cursor: pointer;
        transition: 0.2s;

        &:hover {
          opacity: 0.8;
        }
      }
      .info-link {
        display: block;
        margin-top: 25px;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  .have-bg-color {
    ::v-deep .el-dialog__header {
      padding: 14px 16px;
      background: #f5f8fc;
      border-bottom: 1px solid #e5eaf0;
      p {
        font-size: 18px;
        color: #202933;
        line-height: 1;
      }
      .el-dialog__headerbtn {
        top: 15px;
        i:before {
          content: "返回注册页";
          font-size: 14px;
          color: #0c7ff2;
        }
      }
    }
    ::v-deep .el-dialog__body {
      height: 220px;
    }
    ::v-deep .el-dialog__footer {
      padding: 25px;
      text-align: center;
      border-top: 1px solid #e5eaf0;
    }
    .binding-box {
      .jurisdiction-p {
        padding-left: 200px;
        font-size: 12px;
        color: #ff6332;
      }
    }
  }

  ::v-deep .el-dialog__header {
    padding-bottom: 20px;
    border-bottom: 1px solid #e5eaf0;
    .el-dialog__title {
      font-size: 16px;
      color: #202933;
      line-height: 1;
      font-weight: 500;
    }
  }
  ::v-deep .el-dialog__body {
    padding: 20px;

    .dialog-footer {
      text-align: right;
    }
  }
  ::v-deep .el-tabs {
    .el-tabs__nav {
      .el-tabs__item {
        font-size: 16px;
        font-weight: 400;
      }
      .el-tabs__active-bar {
        // width: 45px;
      }
    }
  }
}
</style>
